<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vm与vc的关系</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				必须要知道的一个关系：
						VueComponent继承了Vue，所以Vue.prototype上的属性和方法，vc都能看得见。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<Weather/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.prototype.test = ()=>{alert(1)}
		Vue.config.productionTip = false

		const Weather = Vue.extend({
			template:`
				<div>	
					<h1>今天天气很{{isHot ? '炎热' : '凉爽'}}</h1>
					<button @click="demo">测试</button>
				</div>
			`,
			data(){
				// console.log('vc',this)
				return {
					isHot:true
				}
			},
			methods: {
				demo(){
					console.log(this.test())
				}
			},
		})

		const vm = new Vue({
			el:'#root',
			components:{Weather}
		})
		// console.log('vm',vm)
	</script>
</html>